
<template>
    <div ref="container">
        <ul style="list-style-type:none">
            <li @click="select('type',key)" :class="queryinfo.type===key?'li-active':''" v-for="(key,value,index) in singertype" :key="index">{{value}}</li>
        </ul>
        <ul style="list-style-type:none">
            <li @click="select('area',key)" :class="queryinfo.area===key?'li-active':''" v-for="(key,value,index) in singerarea" :key="index">{{value}}</li>
        </ul>
        <ul style="list-style-type:none">
            <li @click="select('initial',item)" :class="initialIndexActive===index?'li-active':''" v-for="(item,index) in characters" :key="index">{{item}}</li>
        </ul>
        <div class="singers">
            <div @click="songerclick(item.id)" class="singer-list" v-for="(item,index) in singerlist" :key="index">
                <div class="singer-info">
                    <el-image class="singer-avatar" :src="item.picUrl+'?param=120y120'"></el-image>
                </div>
                <div class="singer-name">{{item.name}}</div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="loadmore" @click="loadMore">
            <div v-if="!loading" class="loadmore-btn" >点击加载更多</div>
            <div v-else class="loadmore-loading">加载中...</div>
        </div>
        <!-- footer 底部留白 -->
        <div style="height: 100px;" class="footer"></div>
    </div>
</template>
<script>

export default {
  data () {
    return {
      singertype: {
        全部: -1,
        男歌手: 1,
        女歌手: 2,
        乐队: 3
      },
      singerarea: {
        全部: -1,
        华语: 7,
        欧美: 96,
        日本: 8,
        韩国: 16,
        其他: 0
      },
      characters: ['热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      //   initial列表特殊，"热门"字段对应的是 -1，无法用value值判断，需要单独设置控制激活状态
      initialIndexActive: 0,
      //   入参
      queryinfo: {
        type: -1,
        area: -1,
        initial: -1,
        limit: 18,
        offset: 0
      },
      //   歌手列表
      singerlist: [],
      loading: false,
      //   上一次触发加载函数的时间
      lasttime: 0

    }
  },
  created () {
    this.getSingerList()
  },
  methods: {
    async getSingerList (select) {
      const { data: res } = await this.$http.get('/artist/list', { params: this.queryinfo })
      if (res.code !== 200) return this.$message.error('获取歌手列表失败')
      //   如果是选择上方的分类，则mvlist重新赋值，否则push
      if (select === 'select') {
        this.singerlist = res.artists
      } else {
        this.singerlist = this.singerlist.concat(res.artists)
      }
      console.log('this.singerlist', this.singerlist)
    },
    // 选择类型
    select (val, key) {
      // 清理分页
      this.queryinfo.offset = 0
      console.log(val, key)
      if (val === 'type') {
        this.queryinfo.type = key
      } else if (val === 'area') {
        this.queryinfo.area = key
      } else if (val === 'initial') {
        this.initialIndexActive = this.characters.indexOf(key)
        //   initial列表特殊，"热门"字段对应的是 -1,需要额外判断
        if (key === '热门') {
          this.queryinfo.initial = -1
        } else {
          this.queryinfo.initial = key
        }
      }

      console.log(this.queryinfo)
      this.getSingerList('select')
    },
    // 加载更多
    loadMore () {
      var now = new Date().getTime() // 每次触发事件获取当前时间
      if (now - this.lasttime > 200) { // 若时间间隔大于了100ms
        this.lasttime = now // 执行代码，并重新计时
        // 执行请求下一页操作
        this.loading = true
        this.queryinfo.offset += 18
        console.log('loadMore:', this.queryinfo.offset)
        this.getSingerList()
        setTimeout(() => {
          this.loading = false
        }, 500)
      }
    },
    // 滚动条
    handleScroll () {
      this.scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop
      // 滚动条高度
      //   console.log('this.scrollTop:', this.scrollTop)
      //   窗口高度
      //   console.log('window.innerHeight:', window.innerHeight)
      //   内容高度
      //   console.log('this.container:', this.$refs.container.offsetHeight)

      if (this.scrollTop + window.innerHeight >= this.$refs.container.offsetHeight) {
        this.loadMore()
      }
    },
    //  点击歌手跳转详情
    songerclick (Id) {
      console.log(Id)
      //   跳转页面
      this.$router.push({ path: `/singer/singerdetail/${Id}` })
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped>
ul{
    display: flex;
    width: 90%;
    /* 宽度不够时允许换行 */
    flex-wrap:wrap;
}
li{
    font-size: 14px;
    padding: 5px 8px;
    cursor: pointer;
}
/* 列表元素激活后的样式 */
.li-active{
    font-size: 14px;
    padding: 5px 8px;
    border-radius: 13px;
    color: white;
    background: #ff4757;
}

/* 歌手列表 */
.singers{
    width: 90%;
    margin: 0 auto;
}
.singer-list{
    width: calc(16.66% - 15px);
    float: left;
    margin-left: 15px;
    margin-top: 20px;
    background-color: #f8f8f8;
    height: calc(16.66% - 15px);
    padding: 10px 0;
    cursor: pointer;
}

.singer-list:hover .singer-avatar{
    /* 悬浮时拉近、旋转 图片 */
    transform: scale(1.1) rotate(10deg);
    /* 延时 */
    transition: all 1s ease 0s;

}
.singer-list:hover{
    background-color: #eeeeee;
}
.singer-info{
    width: 70%;
    margin: 0 auto;
    position: relative;
    padding-top: 70%;
    /* border-radius: 50%; */
    margin-bottom: 10%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.singer-avatar{
    border-radius: 50%;
    position: absolute;
    top: 36px;
    /* 延时 */
    transition: all 1s ease 0s;
}
.singer-name{
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    color: #333333;
    /* 显示1行。超出部分显示".." */
    overflow: hidden;
    display: -webkit-box;
     -webkit-box-orient:vertical;
    -webkit-line-clamp: 1;
}
 /* 监听屏幕的宽度，当宽度小于1000px时，元素属性改变 */
    @media screen and (max-width:750px){
        .singer-list{
                width: calc(33.3% - 15px);
                height: calc(33.3% - 15px);
            }
        .singer-name{
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
        }
        }
/* 加载更多按钮 */
.loadmore{
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    background: #747d8c;
    border-radius: 20px;
    height: 30px;
    line-height: 30px;
    color: rgb(243, 237, 237);
    cursor: pointer;
    text-align:center
}
.loadmore-btn{
    margin: 0 auto;
}
.loadmore-loading{
    margin: 0 auto;
}
/* 清除浮动 */
.clearfix{
    clear: both;
}
.footer{
    height: 100px;
}
</style>
